<template lang="html">
  <div class="">
    <div class="Wenkend-list" :class="{searchBarFixed:isFixed}">
        周末去哪儿
    </div>
    <ul >
      <li class="item border-bottom" v-for="item of list" :key="item.id">
        <div class="item-img-wrapper">
          <img class="item-img" :src="item.imgUrl" alt="">
        </div>
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
var offsetTop1
export default{
  name: 'HomeWenkend',
  props: {
    list: Array
  },
  data () {
    return {
      isFixed: false
    }
  },
  watch: {
    list: function () {
      this.$nextTick(() => {
        window.addEventListener('scroll', this.handleScroll)
        offsetTop1 = document.querySelector('.Wenkend-list').offsetTop - document.querySelector('.Wenkend-list').offsetHeight
      })
    }
  },
  methods: {
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop >= offsetTop1) {
        this.isFixed = true
      }
      if (scrollTop < offsetTop1) {
        this.isFixed = false
      }
      // console.log(scrollTop)
      // console.log(offsetTop1)
      // console.log(this.isFixed)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
@import '~styles/varibles.styl'
  .Wenkend-list
    line-height: .7rem
    background: #eee
    text-indent: .2rem
  .find-more
    height: .8rem
    text-align: center
    a
      line-height: .8rem
      font-size: .3rem
      font-weight: 600
  .searchBarFixed
    width: 100%;
    z-index: 999
    position: fixed;
    top: 0;
  .item-img-wrapper
    overflow: hidden;
    height: 0;
    width: 100%;
    padding-bottom: 38.5%
    img
      width: 100%;
  .item-info
    padding: .1rem;
    min-width: 0
    padding-bottom: .2rem
    .item-title
      line-height: .54rem
      font-size: .32rem
      ellipsis()
    .item-desc
      flex:1
      line-height: .4rem
      color:#bbb
      ellipsis()
</style>
